<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制台</title>
    <!-- 新 Bootstrap5 核心文件 -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/popper.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- Fontawesome Font Awesome Solid + Brands -->
    <link href="/static/fontawesome/css/all.css" rel="stylesheet" />
    <!-- jquery-3.7.1 -->
    <script src="/static/jquery/jquery-3.7.1.js"></script>
    <!-- <script src="/static/jquery/jquery.qrcode.min.js"></script> -->
    <!-- self script and css style -->
    <script src="/static/js/md5.js"></script>
    <script src="/static/js/admin/index.js"></script>
    <link rel="stylesheet" href="/static/css/admin/index.css">
</head>

<body onload="defaultHeight();">
    <div id="main" class="container-fluid p-0">
        <div id="main-header" class="container-fluid p-3 bg-dark text-white d-flex justify-content-between">
            <div>
                <h3>控制台</h3>
            </div>
            <div class="dropdown">
                <button type="button" class="btn text-white dropdown-toggle" data-bs-toggle="dropdown"><i
                        class="fa-regular fa-user fa-lg" style="color: #f0f2f4;"></i>
                    {{ nicename }}
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/admin/logout/">注销</a></li>
                </ul>
            </div>
        </div>
        <div id="main-body" class="container-fluid p-0 d-flex">
            <div class="p-0 bg-secondary text-white" style="width: 240px;height: 100%;">
                <div class="input-group px-1 py-3">
                    <span class="input-group-text"><i class="fa-duotone fa-solid fa-magnifying-glass"></i></span>
                    <input type="search" class="form-control" name="search" placeholder="搜索">
                </div>
                <nav class="p-0 navbar bg-light bg-dark navbar-dark">
                    <ul id="menu" class="navbar-nav" style="width: 100%;">
                        <li class="nav-item border border-secondary rounded">
                            <a class="nav-link p-3" href="#menu-a" data-bs-toggle="collapse">用户权限</a>
                            <div id="menu-a" class="collapse bg-secondary text-white show" data-bs-parent="#menu">
                                <div class="list-group">
                                    <a href="#" data-url="/admin/root/" class="menu list-group-item list-group-item-action">管理员权限</a>
                                    <a href="#" class="menu list-group-item list-group-item-action">第二项</a>
                                    <a href="#" class="menu list-group-item list-group-item-action">第三项</a>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item border border-secondary rounded">
                            <a class="nav-link p-3" href="#menu-b" data-bs-toggle="collapse">Link
                                2</a>
                            <div id="menu-b" class="collapse bg-secondary text-white" data-bs-parent="#menu">
                                <div class="list-group">
                                    <a href="#" class="menu list-group-item list-group-item-action">第一项</a>
                                    <a href="#" class="menu list-group-item list-group-item-action">第二项</a>
                                    <a href="#" class="menu list-group-item list-group-item-action">第三项</a>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item border border-secondary rounded">
                            <a class="nav-link p-3" href="#menu-c" data-bs-toggle="collapse">Link
                                3</a>
                            <div id="menu-c" class="collapse bg-secondary text-white" data-bs-parent="#menu">
                                <div class="list-group">
                                    <a href="#" class="menu list-group-item list-group-item-action">第一项</a>
                                    <a href="#" class="menu list-group-item list-group-item-action">第二项</a>
                                    <a href="#" class="menu list-group-item list-group-item-action">第三项</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
            <div id="main-body-page" class="p-4"></div>
        </div>
        <div id="main-footer" class="container-fluid p-2 bg-secondary text-dark d-flex justify-content-center">
            <a href="#offcanvasRight" class="text-dark" data-bs-toggle="offcanvas" aria-controls="offcanvasRight">右侧侧边栏</a>
        </div>
        <!-- 侧边栏 -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasRightLabel">显示在右侧侧边栏</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                ...
            </div>
        </div>
    </div>



</body>

</html>